<template>
  <div class="sign-pending-box">
    <!-- 标题 -->
    <mu-base-title title="待处理服务" />
    <!-- 表格 -->
    <mu-base-table :columnData="columnData" :tableData="servicesData" :total="total" v-model:page-data="pageData">
      <template #toolbar>
        <!-- 搜索表单 -->
        <mu-search-form v-model:form-data="formData" :stateData="statesData" @searchSigns="searchServices"
          style="margin-top: 40px;" title="服务" :is-have-add-btn="true" :is-have-name="false" />
      </template>
      <template #state="{ row }">
        <span :style="{ color: statesData[row.state - 1].color }" style="font-weight: 600;">
          {{ statesData[row.state - 1].label }}
        </span>
      </template>
      <template #handle="{ row }">
        <router-link :to="`/service/detail/${JSON.stringify({ _id: row._id, btnName: '编辑服务信息' })}`">
          <el-button link style="color: var(--el-color-primary);">查看详情</el-button>
        </router-link>
        <router-link :to="`/service/update/${row._id}`">
          <el-button link style="color: var(--el-color-primary);">编辑</el-button>
        </router-link>
      </template>
    </mu-base-table>
  </div>
</template>

<script setup lang="ts">
import { searchServicesApi } from '@/api/serviceManage';
import { onMounted, ref, watch } from 'vue';

const statesData = [
  { label: '待审核', value: '1', color: '#3DD4A7' },
  { label: '待支付', value: '2', color: '#FBE178' }
];

// 表格组件 v-model 数据
const formData: any = ref({});

// 表格列 数据
const columnData = ref<columnDataType[]>([
  { label: '', prop: '', width: 55, settings: { type: 'selection' } },
  { label: '编号', prop: '_id', align: 'center', settings: { 'min-width': 120 } },
  { label: '姓名', prop: 'residentId.name', align: 'center' },
  { label: '身份证号', prop: 'residentId.IDnumber', align: 'center' },
  { label: '手机号码', prop: 'residentId.phone', align: 'center' },
  { label: '服务状态', prop: 'state', align: 'center' },
  { label: '服务包', prop: 'servicePackId.name', align: 'center' },
  { label: '服务项目', prop: 'servicePackId.serviceItemIds[0].name', align: 'center' },
  { label: '申请时间', prop: 'time', align: 'center' },
  { label: '操作', prop: 'handle', align: 'center' },
]);
// 表格 数据
const servicesData = ref([]);

// 分页 总条数
const total = ref(0);
// 分页 数据
const pageData = ref({
  currentPage: 1,
  pageSize: 5,
});



watch(pageData, () => {
  searchServices();
}, { deep: true });



onMounted(() => {
  searchServices();
})



// 请求：获取 服务 数据
const searchServices = async () => {
  const res = await searchServicesApi({
    type: 'pending',
    ...pageData.value,
    ...formData.value
  });
  // console.log(res);
  if (res.code == 200) {
    servicesData.value = res.data.rows;
    total.value = res.data.total;
  }
}

</script>

<style scoped lang="scss"></style>